<template>
    <d-row class="docs-devui-row">
        <d-col :span="4"></d-col>
        <d-col :span="16">
            <d-card style="text-align: center" v-loading="load">
                <div>
                    岗位数量
                    <d-input-number v-model="jobCount" :min="1" :max="20" style="margin: 10px"></d-input-number>
                    <d-button variant="solid" size="lg" @click="salaryCompareQuery">
                        查询
                    </d-button>
                </div>
                <div style="height: 500px; width: 100%" id="main">

                </div>
            </d-card>
        </d-col>
        <d-col :span="4"></d-col>
    </d-row>

</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import "echarts-gl"

export default {
    name: "SalaryView",
    data() {
        return {
            load: false,
            jobCount: 5,
            option: {
                visualMap: {
                    max: 20
                },
                xAxis3D: {
                    type: 'category',
                    name: '学历'
                },
                yAxis3D: {
                    type: 'category',
                    name: '岗位'
                },
                zAxis3D: {
                    type: 'value',
                    name: '薪资(K)'
                },
                grid3D: {
                    boxWidth: 200,
                    boxDepth: 80,
                    light: {
                        main: {
                            intensity: 1.2,
                            shadow: true
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    }
                },
                series: [
                    {
                        type: 'bar3D',
                        label: {
                            fontSize: 16,
                            borderWidth: 1
                        },
                        shading: 'lambert',
                        emphasis: {
                            label: {
                                fontSize: 20,
                                color: '#900'
                            },
                            itemStyle: {
                                color: '#900'
                            }
                        }
                    }
                ]
            }
        }
    },
    methods: {
        salaryCompareQuery() {
            this.load = true;
            axios.post('http://152.136.191.171:9243/job/salary', {
                jobCount: this.jobCount
            }).then(resp => {
                let chartDom = document.getElementById('main');
                let myChart = echarts.init(chartDom);
                let respData = resp.data.data;
                this.option.xAxis3D.data = respData.x;
                this.option.yAxis3D.data = respData.y;
                this.option.series[0].data = respData.z.map(function (item) {
                    return {
                        value: [item[0], item[1], item[2]]
                    };
                });
                myChart.setOption(this.option);
                this.load = false;
            })

        }
    }
}
</script>

<style scoped>

</style>